<template>
  <div>
    <div style="text-align: center">
      <el-button icon="el-icon-d-arrow-left" @click="$emit('close')"
        >返回</el-button
      >
      <el-button type="primary" icon="el-icon-printer" v-print="'#print'"
        >打印</el-button
      >
    </div>
    <div id="print">
      <div
        v-for="(item, index) in content"
        :key="'page_' + index"
        class="page font-fit"
      >
        <!-- <div class="subpage"> -->
        <div class="title">
          附件三：民航空管系统管制岗位复训模拟机训练记录表
        </div>
        <table class="ruletable">
          <tr>
            <td colspan="4" style="text-align: center">
              民航空管系统管制岗位复训模拟机训练记录表
            </td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: center">基本信息</td>
          </tr>
          <tr>
            <td colspan="1">姓名</td>
            <td colspan="1">{{ item.traineeName }}</td>
            <td colspan="1">执照类别</td>
            <td colspan="1">{{ item.traineeLicences.join("、") }}</td>
          </tr>
          <tr>
            <td colspan="1">管制级别</td>
            <td colspan="1">{{ item.traineeGrade }}</td>
            <td colspan="1">单位及职务</td>
            <td colspan="1">
              {{ item.traineeDepartment }}{{ item.traineeOffice
              }}{{ item.traineePost }}
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div>复训科目及时间：</div>
              <p style="padding-top: 12px">
                {{ item.subjects.join("、") }}，{{
                  formatDate("yyyy年MM月dd日", new Date(item.trainingDate))
                }}。
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div>科目自我评定：</div>
              <p style="padding-top: 12px">{{ item.traineeComments }}</p>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div>教员评定：（A、B、C、D、E。A为最好）</div>
              <p>
                <el-row>
                  <el-col
                    :span="8"
                    v-for="cell in item.evaluations"
                    :key="cell.title"
                  >
                    {{ cell.title }}：{{
                      ["E", "D", "C", "B", "A"][cell.value - 1]
                    }}
                  </el-col>
                </el-row>
              </p>
              <div>点评：</div>
              <p style="font-size: 14px">
                <span v-for="cell in item.subjectsComments" :key="cell.subject"
                  ><span v-if="cell.comments.length > 0">
                    {{ cell.subject }}方面，{{ cell.comments.join("、") }}；
                  </span>
                </span>
                <span v-if="item.coachComments.length > 0"
                  >除此之外，{{ item.coachComments }}。</span
                >
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div>训练科目评定（勾选）</div>
              <p>
                <el-row>
                  <el-col :span="12">
                    <span class="checkbox">
                      <span style="padding-right: 8px">通过</span>
                      <symbolChecked v-if="item.pass == '是'" />
                      <symbolUnchecked v-else />
                    </span>
                  </el-col>
                  <el-col :span="12">
                    <span class="checkbox">
                      <span style="padding-right: 8px">加练</span>
                      <symbolChecked v-if="item.pass == '否'" />
                      <symbolUnchecked v-else />
                    </span>
                  </el-col>
                </el-row>
              </p>
              <div v-if="item.pass == '否'">建议加练科目：</div>
              <p v-if="item.pass == '否'">
                {{ item.failedSubjects.join("、") }}
              </p>
              <div
                style="
                  display: flex;
                  width: 100%;
                  align-items: center;
                  justify-content: flex-end;
                  margin-top: 1cm;
                  margin-bottom: 0.5cm;
                "
              >
                <span>教员签字：</span>
                <span
                  style="
                    width: 3cm;
                    font-size: 0.8cm;
                    color: rgba(0, 0, 0, 0.15);
                  "
                  >{{ item.coachName }}</span
                >
              </div>
            </td>
          </tr>
        </table>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { format } from "@/utils/datetime.js";
import symbolChecked from "./symbolChecked.vue";
import symbolUnchecked from "./symbolUnchecked.vue";
export default {
  name: "pageView",
  data() {
    return {
      content: [],
    };
  },
  components: {
    symbolChecked,
    symbolUnchecked,
  },
  methods: {
    formatDate: format,
    print() {
      this.$print(this.$refs.print);
    },
    generatePages(content) {
      this.content = content;
    },
  },
};
</script>

<style scoped>
#print {
  font-family: "SimHei", "黑体";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  color: #000;
  text-align: justify;
}

p {
  padding: 0.5em 0;
  margin: 0;
  text-align: justify;
  text-indent: 2em;
  line-height: 1.5;
}

.title {
  font-size: 24px;
  /* font-weight: bold; */
  padding: 10px;
  height: 1.5cm;
}

.ruletable {
  width: 100%;
  border-collapse: collapse;
  height: 24cm;
}

.ruletable td {
  border: 0.05cm solid #000;
  padding: 0.2cm 0.3cm;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #d3d3d3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  .page {
    margin: 0;
    border: none;
    border-radius: none;
    min-height: 29.7cm;
    /* padding: 2cm 0 0 2cm; */
    padding: 2cm;
    box-shadow: none;
    background: initial;
    page-break-after: always;
  }
}

.checkbox {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
